<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
  <a-modal width="800px" v-model:visible="visible" :on-before-ok="save" :onClose="closeData" unmount-on-close>
    <template #title>
      修改配置：{{ changeName }}
    </template>

    <a-form :model="form" ref="formRef">


      <a-form-item field="mch_id" label="mch_id"  required>
        <a-input v-model="form.mch_id" placeholder="必填-商户号，服务商模式下为服务商商户号"
                 allow-clear mode="button" required/>
        <template #help>
          <div>可在 https://pay.weixin.qq.com/ 账户中心->商户信息 查看</div>
        </template>
      </a-form-item>

      <a-form-item field="app_id" label="关联应用appId" required >
        <a-input v-model="form.app_id" placeholder="关联应用appId"
                 allow-clear mode="button"/>
        <template #help>
          <div>在 https://pay.weixin.qq.com/index.php/extend/merchant_appid/mapay_platform/account_manage 《产品中心 - AppID账号管理》中设置</div>
        </template>
      </a-form-item>


      <a-form-item field="api_key" label="v3 商户秘钥" >
        <a-input v-model="form.api_key" placeholder="必填-v3 商户秘钥"
                 allow-clear mode="button"/>
        <template #help>
          <div>即 API v3 密钥(32字节，形如md5值)，可在 账户中心->API安全 中设置</div>
        </template>
      </a-form-item>

      <a-form-item field="serial_number" label="证书序列号"  required>
        <a-input v-model="form.serial_number" placeholder="必填-证书序列号"
                 allow-clear mode="button"/>

        <template #help>
          <div>证书序列号</div>
        </template>
      </a-form-item>

      <a-form-item field="private_key" label="商户证书key私钥"  required>
        <a-input v-model="form.private_key" placeholder="商户证书key私钥 字符串或路径"
                 allow-clear mode="button"/>
        <template #help>
          <div>即 API证书 PRIVATE KEY，可在 账户中心->API安全->申请API证书 里获得</div>
        </template>
      </a-form-item>

      <a-form-item field="apiclient_cert" label="商户证书"  required>
        <a-input v-model="form.apiclient_cert" placeholder="商户证书 字符串或路径"
                 allow-clear mode="button"/>
        <template #help>
          <div>即 API证书 PRIVATE KEY，可在 账户中心->API安全->申请API证书 里获得</div>
        </template>
      </a-form-item>


      <a-form-item field="notify_url" label="微信回调url" required>
        <a-input v-model="form.notify_url" placeholder="必填-微信回调url"
                 allow-clear mode="button"/>
        <template #help>
          <div>http://xxx.com/api/v1/payment/wechatNotify  正确回调</div>
        </template>
      </a-form-item>

    </a-form>
  </a-modal>
</template>

<script setup>
import {onMounted, reactive, ref} from 'vue'
import {Message} from '@arco-design/web-vue'
import paymentMethod from '@/api/payment/paymentMethod'


const visible = ref(false)

const form = ref({})
const formRef = ref()
const changeName = ref();
const emit = defineEmits(['success'])



const open = async (record) => {
  changeName.value=record.channel_name
  form.value.id=record.id

  var settings=record.setting
  form.value.mch_id=settings.mch_id;
  form.value.app_id=settings.app_id;
  form.value.api_key=settings.api_key;
  form.value.serial_number=settings.serial_number;
  form.value.private_key=settings.private_key;
  form.value.apiclient_cert=settings.apiclient_cert;
  form.value.notify_url=settings.notify_url;
  form.value.mode=settings.mode;
  visible.value = true
}
//----选择框变化


const save = async (done) => {
  console.log(form.value);
  const response = await paymentMethod.saveConfig(form.value);
  response.success && Message.success(response.message);
  formRef.value.resetFields();
  emit('success')
  done(true)
}
const closeData = () => {

  formRef.value.resetFields();
}


defineExpose({open})
</script>

<style scoped>
.copy-button {
  position: absolute;
  right: 15px;
  top: 0px;
  z-index: 999;
}
</style>